import $ from '../jquery.js';
import cookie from '../cookie.js';
let smallbox = $('.smallbox');
let movebox = $('.movebox');
let bigbox = $('.bigbox');
let bigimg = $('.bigbox>img');
// console.log(smallbox);
let tabs = $('.main > .product > .wrapper .w_center > div > div:nth-of-type(1) > div:nth-of-type(3) > ul li');

tabs.on('click',function(ev) {
    let src1 = $(ev.target).attr("src");
    smallbox.children('img').attr("src",src1);
    bigbox.children('img').attr("src",src1);
});

smallbox.on('mouseenter', function() {
    
    movebox.removeClass('hide');
    bigbox.removeClass('hide');
    movebox.css({
        width: smallbox.width() * bigbox.width() / bigimg.width() + 'px',
        height: smallbox.height() * bigbox.height() / bigimg.height() + 'px',
    });
    smallbox.on('mousemove', function(ev) {
        var X = smallbox.offset().top;
        var Y = smallbox.offset().left;
        let top = ev.pageY - (movebox.height()/2)-X;
        let left = ev.pageX - (movebox.width()/2)-Y;
   
        let ratio = bigimg.width() / smallbox.width();

        // console.log(ratio);

        
        if (top <= 0) {
            top = 0;
        } else if (top >= smallbox.height() - movebox.height()) {
            top = smallbox.height() - movebox.height();
        }

        if (left <= 0) {
            left = 0;
        } else if (left >= smallbox.width() - movebox.width()) {
            left = smallbox.width() - movebox.width();
        }

        movebox.css({
            top: top + 'px',
            left: left + 'px'
        });

        bigimg.css({
            top: top * -ratio + 'px',
            left: left * -ratio + 'px'
        });
    });
});
smallbox.on('mouseleave', function() {
    movebox.addClass('hide');
    bigbox.addClass('hide'); 
});



    